<template>
  <div class="flex flex-column height">
    <!-- <a href="javascript:;" @click="hideOptionMenuTest()">隐藏菜单</a>
    <a href="javascript:;" @click="closeWindowTest()">关闭webView</a> -->
    <div class="content_main">
      <div class="header">
        <img src="./image/index_go_1.png" @click="closeWindowTest" alt="" />
        <div v-if="show">广慈-太保互联网医院</div>
      </div>
      <div class="banner_top" @click="goAboutFn">
        <h1>
          广慈-太保互联网医院
          <img class="arrow" src="@/assets/index/left_icon_1.png" alt="" />
        </h1>
        <div class="introduce flex">
          <div class="registered" @click.stop="toOrder">
            <img src="./image/index_icon.png" alt="" />
            预约挂号
          </div>
          <div class="history" @click.stop="toRegistrationDetails">
            <img src="./image/index_icon2.png" alt="" />
          </div>
        </div>
      </div>
      <div class="special_department">
        <div class="title_top flex justify-content-between align-items">
          <h3>特色科室</h3>
          <div class="flex align-items" @click="departmentsFn">
            全部
            <img src="@/assets/index/left_icon.png" alt="" />
          </div>
        </div>
        <ul class="flex flex-wrap">
          <li @click="getDoctorlistFn('pnk')">
            <img src="@/assets/index/nk_icon.png" alt="" />
            <div>
              <h3>普内科</h3>
              <p>胃炎/高血压/糖尿病</p>
            </div>
          </li>
          <li @click="getDoctorlistFn('zyk')">
            <img src="@/assets/index/yk_icon.png" alt="" />
            <div>
              <h3>中医科</h3>
              <p>中医内科/中医肾病科...</p>
            </div>
          </li>
          <li @click="getDoctorlistFn('pfk')">
            <img src="@/assets/index/gz_icon.png" alt="" />
            <div>
              <h3>皮肤科</h3>
              <p>湿疹/痤疮/皮炎...</p>
            </div>
          </li>
          <li @click="getDoctorlistFn('xlk')">
            <img src="@/assets/index/w_icon.png" alt="" />
            <div>
              <h3>精神心理科</h3>
              <p>心理咨询/精神科...</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="doctor">
        <div class="title_top flex justify-content-between align-items">
          <h3>名牌医生</h3>
        </div>
        <div class="doctor_list">
          <van-sticky>
            <van-dropdown-menu>
              <van-dropdown-item
                ref="department"
                :title="departmentText ? departmentText : '科室'"
                @open="openScrollFn('1')"
              >
                <van-tree-select
                  :items="departmentList"
                  height="600px"
                  :active-id.sync="activeId"
                  :main-active-index.sync="activeIndex"
                  @click-nav="clickNavFn"
                  @click-item="itemFn"
                />
              </van-dropdown-item>
              <van-dropdown-item
                @open="openScrollFn('2')"
                :title="sortText ? sortText : '排序'"
                :options="sortList"
                @change="itemChange"
              />
            </van-dropdown-menu>
          </van-sticky>
          <div :style="{ height: height - 100 + 'px', 'overflow-y': 'auto' }">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              :offset="10"
              class="list"
            >
              <div v-if="listData.length">
                <list
                  v-for="(item, index) in listData"
                  :key="index"
                  @getDetailFn="getDetailFn"
                  @toOrderForm="toOrderFormFn"
                  :dataItem="item"
                ></list>
              </div>
            </van-list>
          </div>
        </div>
      </div>
    </div>
    <van-loading
      type="spinner"
      v-if="loading1"
      class="spinner"
      color="#1989fa"
    />
  </div>
</template>
<script>
import utils from '@/utils/utils'
import List from "@/components/list";
import { GetLevel, doctorList, cityAndSortSelect } from "@/api/index";
import { Dialog } from "vant";
import { setToken } from "@/utils/auth";
export default {
  name: "Index",
  components: {
    List,
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      show: false,
      loading1: false,
      loading: false,
      finished: false,
      page: 1,
      size: 10,
      listData: [],
      height: 0,
      wholeCountry: "0",
      department: "",
      departmentText: "",
      sort: "",
      sortText: "",
      activeId: "",
      activeIndex: -1,
      departmentList: [],
      sortList: [],
    };
  },
  created() {
    localStorage.clear();
    // this.hideOptionMenuTest()
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
    this.height = window.innerHeight;
    this.loadDone()
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    handleScroll() {
      var container = this.$el.querySelector(".content_main");
      const header = this.$el.querySelector(".header");
      if (container.scrollTop > header.clientHeight) {
        header.style.background = "#fff";
        this.show = true;
      }else{
         header.style.background = "";
        this.show = false;
      }
    },
    toRegistrationDetails() {
      this.$router.push("/registrationDetails");
    },
    toOrder() {

      localStorage.setItem(
        "order",
        JSON.stringify({
          type: "3",
        })
      );
      this.$router.push("/order");

    },
    cityAndSortSelectFn() {
      // 排序
      cityAndSortSelect().then((res) => {
        console.log(res);
        if (res.body) {
          res.body.sortList.map((key) => {
            key.value = key.valueCode;
            key.text = key.valueName;
          });
          this.sortList = res.body.sortList;
        }
      });
    },
    doctorListFn() {
      //获取医生列表数据
      this.loading = true;
      const obj = {
        current: this.page,
        size: this.size,
        cityKey: "",
        departMentKey: this.department,
        sort: this.sort,
      };
      doctorList(obj)
        .then((res) => {
          this.loading = false;
          if (res.body) {
            if (res.body.records.length) {
              this.finished = res.body.current == res.body.pages;
              this.listData = this.listData.concat(res.body.records);
              this.listData = this.listData.filter((key) => key != "");
            } else {
              this.finished = true;
              this.listData = [];
            }
          } else {
            return this.Toast("没有数据");
          }
        })
        .catch(() => {
          this.loading = false;
          this.finished = true;
          return false;
        });
    },
    clickNavFn(item) {
      this.GetLevelFn(item);
    },
    GetLevelFn(item) {
      //获取科室
      const data = {
        parentDeparmentCode:
          item != undefined ? this.departmentList[item].valueCode : "",
      };
      this.loading1 = true;
      GetLevel(data)
        .then((res) => {
          this.loading1 = false;
          if (res.body) {
            if (item != undefined) {
              res.body.departMentList.map((key) => {
                key.id = key.valueCode;
                key.text = key.valueName;
              });
              if (!res.body.departMentList.length) {
                this.$router.push({
                  path: "",
                  query: {
                    key: this.departmentList[item].valueCode,
                  },
                });
              }
              this.departmentList[item].children = res.body.departMentList;
            } else {
              res.body.departMentList.map((key) => {
                key.id = key.valueCode;
                key.text = key.valueName;
              });
              this.departmentList = res.body.departMentList;
            }
          } else {
            return this.Toast("没有数据");
          }
        })
        .catch(() => {
          this.loading1 = false;
          return false;
        });
    },
    getDetailFn(item) {
      localStorage.setItem("order", JSON.stringify(item));
      this.$router.push("/detail");
    },
    goAboutFn() {
      this.$router.push("/introduction");
    },
    departmentsFn() {
      this.$router.push({
        path: "/departments",
      });
    },
    toOrderFormFn(item) {
      localStorage.setItem("order", JSON.stringify(item));
      this.$router.push("/order");
    },
    getDoctorlistFn(item) {
      let obj = {};
      switch (item) {
        case "pnk":
          obj = {
            code: "1326130288519295999",
            name: "普内科",
          };
          break;
        case "zyk":
          obj = {
            code: "1326130288519294989",
            name: "中医科",
          };
          break;
        case "pfk":
          obj = {
            code: "1326130288519294901",
            name: "皮肤科",
          };
          break;
        case "xlk":
          obj = {
            code: "1326130288519294967",
            name: "精神心理科",
          };
          break;
        default:
          break;
      }
      this.$router.push({
        path: "/doctorlist",
        query: obj,
      });
    },
    onLoad() {
      this.doctorListFn();
      this.page++;
    },
    itemChange(val) {
      this.sort = val;
      const arr = this.sortList.filter((key) => key.value == val);
      this.sortText = arr[0].text;
      this.page = 1;
      this.listData = [];
      this.onLoad();
    },
    openScrollFn(i) {
      this.$nextTick(() => {
        var container = this.$el.querySelector(".content_main");
        container.scrollTop = container.scrollHeight;
      });
      switch (i) {
        case "1":
          if (this.activeIndex > -1) {
            this.GetLevelFn(this.activeIndex);
          } else {
            this.GetLevelFn();
          }
          break;
        default:
          this.cityAndSortSelectFn();
          break;
      }
    },
    itemFn(val) {
      this.department = val.valueCode;
      this.departmentText = val.valueName;
      this.$refs.department.toggle();
      this.page = 1;
      this.listData = [];
      this.onLoad();
    },
    back() {
      console.log(1);
    },
    rightClick() {
      console.log(2);
    },
    loadDone(){ //页面载入完成后，执行方法
      var _this = this
      var timer = setInterval(function () {
        console.log(document.readyState)
        if (document.readyState === 'complete') {
          _this.getGlobalValueTest()
          window.clearInterval(timer)
        }
      }, 500)
    },
    //根据key获取App储存的数据
    getGlobalValueTest(){
      var params = {
        key: '_SHANTAI_ATK_', //设置要获取的全局数据的key
        delete: false, //获取全局value后是否删除存储的该键值对
        success: function (res) {
          setToken(res)
          console.log('token:'+res); //回调返回该全局数据的value
        }
      }
     window.primeton && window.primeton.getGlobalValue(params);
    },
    //隐藏右上角菜单
    hideOptionMenuTest(){
      window.primeton.hideOptionMenu()
    },
    //关闭当前网页窗口
    closeWindowTest(){
      window.primeton.closeWindow();
    },

  }
};
</script>
<style scoped>
.doctor_list >>> .van-dropdown-menu__title--active,
.doctor_list >>> .van-dropdown-item__option--active,
.doctor_list >>> .van-tree-select__item--active,
.doctor_list >>> .van-dropdown-item__option--active .van-dropdown-item__icon {
  color: #02c0cb;
}
.doctor_list >>> .van-sidebar-item--select::before {
  background-color: #02c0cb;
}
.doctor_list >>> .van-dropdown-menu__title::after {
  border-color: transparent transparent #02c0cb #02c0cb;
}

.special_department {
  margin-bottom: 0.18rem;
}
.special_department ul {
  background: #fff;
}
.special_department li {
  box-sizing: border-box;
  width: 50%;
  height: 0.68rem;
  display: flex;
  align-items: center;
}
.special_department li img {
  margin-left: 0.28rem;
  margin-right: 0.18rem;
  width: 0.3rem;
}
.special_department li h3 {
  font-size: 0.14rem;
  height: 0.18rem;
  line-height: 0.18rem;
  margin-bottom: 0.01rem;
  color: #666;
}
.special_department li p {
  font-size: 0.1rem;
  height: 0.14rem;
  line-height: 0.14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  color: #999;
}
.special_department li:nth-of-type(1) {
  border-right: 1px solid #f7f7f7;
  border-bottom: 1px solid #f7f7f7;
}
.special_department li:nth-of-type(2) {
  border-bottom: 1px solid #f7f7f7;
}
.special_department li:nth-of-type(3) {
  border-right: 1px solid #f7f7f7;
}
.title_top {
  height: 0.22rem;
  font-size: 0.16rem;
  padding: 0 0.18rem;
  margin-bottom: 0.09rem;
  box-sizing: border-box;
}
.title_top div {
  color: #666;
  font-size: 0.14rem;
}
.title_top img {
  width: 0.14rem;
}
.content_main {
  height: 100%;
  overflow-y: auto;
}
.banner_top {
  position: relative;
  height: 1.9rem;
  margin-bottom: 0.6rem;
  background: url("../../assets/index/index_bg.png") no-repeat left top;
  background-size: 100% 100%;
}
.banner_top h1 {
  padding-top: 0.67rem;
  font-size: 0.24rem;
  text-align: center;
  color: #fff;
}
.banner_top h1 img {
  width: 0.19rem;
  vertical-align: middle;
}
.introduce {
  width: 2.6rem;
  height: 0.48rem;
  position: absolute;
  left: 0.57rem;
  bottom: -0.24rem;
}
.registered {
  width: 2rem;
  height: 100%;
  background: url("./image/index_bg.png") no-repeat left top;
  background-size: 100% 100%;
  margin-right: 0.12rem;
  font-size: 0.16rem;
  color: #fff;
  border-radius: 0.12rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.registered img {
  width: 0.2rem;
  display: block;
  margin-right: 0.1rem;
}
.history {
  width: 0.48rem;
  height: 0.48rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("./image/index_bj2.png") no-repeat left top;
  background-size: 100% 100%;
  border-radius: 0.12rem;
}
.history img {
  width: 0.2rem;
  display: block;
}
</style>
<style lang="less" scoped>
.header {
  position: fixed;
  left: 0;
  top: 0;
  height: 0.5rem;
  width: 100%;
  z-index: 1;
  text-align: center;
  display: flex;
  align-items: center;
  padding: 0 0.15rem;
  img {
    width: 0.1rem;
  }
  div {
    flex: auto;
    text-align: center;
    color: #333;
    font-size: 0.18rem;
  }
}
.doctor_list {
  background: #fff;
  .list {
    margin: 0 0.11rem 0 0.14rem;
  }
}
</style>
